<template>
	<view class="wrapper_steps">
		<view class="item1 item">
			<u--image :src="active>=1?'https://dabinhouse-1320826375.cos.ap-shanghai.myqcloud.com/images/db35d2d4-e5ca-45fb-a6eb-70b287f02f45.png':'https://dabinhouse-1320826375.cos.ap-shanghai.myqcloud.com/images/64c30dc1-09d1-401b-b921-3de45deb0cfe.png'"  width="80rpx" height="80rpx"></u--image>
			<!-- <u-icon :name="active>=1?'https://dabinhouse-1320826375.cos.ap-shanghai.myqcloud.com/images/db35d2d4-e5ca-45fb-a6eb-70b287f02f45.png':'https://dabinhouse-1320826375.cos.ap-shanghai.myqcloud.com/images/64c30dc1-09d1-401b-b921-3de45deb0cfe.png'":color="active>=1?'#ff8400':''" size="40"></u-icon> -->
			<u--text text="1.房源确认" size="12" lineHeight="28" :color="active>=1?'#ff8400':''"></u--text>
		</view>
		<u-icon name="arrow-right-double" :color="active>=1?'#ff8400':''" size="20"></u-icon>
		<view class="item2 item">
			<!-- <u--image :src="active>=2?'../../static/steps/photograph_.png':'../../static/steps/photograph.png'"  width="80rpx" height="80rpx"></u--image> -->
			 <u-icon :name="active>=2?'https://dabinhouse-1320826375.cos.ap-shanghai.myqcloud.com/images/8db2bf33-e526-4e38-a5e3-6d980283b500.png':'https://dabinhouse-1320826375.cos.ap-shanghai.myqcloud.com/images/cba91bf8-e8bf-4dd0-b3c3-dca8364d297e.png'" :color="active>=2?'#ff8400':''" size="40"></u-icon>
			<u--text text="2.房间拍照" size="12" lineHeight="28" :color="active>=2?'#ff8400':''"></u--text>
		</view>
		<u-icon name="arrow-right-double" :color="active>=3?'#ff8400':''" size="20"></u-icon>
		<view class="item3 item">
			<!-- <u--image :src="active>=3?'../../static/steps/facility_.png':'../../static/steps/facility.png'" width="80rpx" height="80rpx"></u--image> -->
			 <u-icon :name="active>=3?'https://dabinhouse-1320826375.cos.ap-shanghai.myqcloud.com/images/caabe1cb-60ef-43ea-a6b8-9bf842474fba.png':'https://dabinhouse-1320826375.cos.ap-shanghai.myqcloud.com/images/5f8e161a-5bca-4b34-a32e-d8abb85781ba.png'" :color="active>=3?'#ff8400':''" size="40"></u-icon>
			<u--text text="3.屋内设施" size="12" lineHeight="28" :color="active>=3?'#ff8400':''"></u--text>
		</view>
		<u-icon name="arrow-right-double" :color="active>=4?'#ff8400':''" size="20"></u-icon>
		<view class="item4 item">
			<!-- <u--image :src="active>=4?'../../static/steps/impress_.png':'../../static/steps/impress.png'"  width="80rpx" height="80rpx"></u--image> -->
		    <u-icon :name="active>=4?'https://dabinhouse-1320826375.cos.ap-shanghai.myqcloud.com/images/9b08b016-32f9-449c-adc6-feb79ca3d90d.png':'https://dabinhouse-1320826375.cos.ap-shanghai.myqcloud.com/images/b503c8ad-4a8c-4361-8273-70f2e00c14f4.png'":color="active>=4?'#ff8400':''" size="40"></u-icon>
			<u--text text="4.房间印象" size="12" lineHeight="28" :color="active>=4?'#ff8400':''"></u--text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			active: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {}
		},
		methods: {

		},
	}
</script>

<style scoped lang="scss">
	.wrapper_steps {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
</style>